<!-- 职位报名表 -->
<template>
    <AllOut>
        <div class="index2_content" v-loading="loading">
            <TopNav :show_links="true"></TopNav>
            <div class="content_out index_content" style="padding-top:84px;">
                <b-container fluid>
                    <b-row>
                        <b-col md="3" sm="12" class="">
                            <div class="asdise_content">
                                <ul class="asdise_content_ul">
                                    <li :class="indexValue == item.id ? 'blue' : ''" v-for="(item, index) in templateValue"
                                        :key="index" @click="classClick(item)">
                                        <span class="fontz fonts18">{{ item.name }}</span>
                                        <img v-if="indexValue == item.id" class="" src="/img/r1.png" alt="" srcset="" />
                                        <img v-else class="" src="/img/rw1.png" alt="" srcset="" />
                                    </li>
                                </ul>
                            </div>

                        </b-col>
                        <b-col md="9" sm="12" class="">
                            <div class="flex jcfe">
                                <!-- <el-button type="primary">预览</el-button>
                                <el-button type="primary">下载</el-button> -->
                                <el-button type="primary" @click="submitForm('form')">提交</el-button>
                                <el-button type="" @click="back()">返回</el-button>
                            </div>
                            <div class="indexNav_content flex  aic jcc" style="margin-top: 20px;">
                                <span class="fontz fonts24">成都香城人力资源开发有限公司应聘报名表</span>
                            </div>
                            <div class="my_main" v-if="showBool">
                                <el-form ref="form" :model="ruleForm" :rules="rules" label-width="80px"
                                    label-position="top">
                                    <div id="" v-for="(item, index) in ruleForm.templateValue" :key="index">
                                        <p class="my_main_title fonts18 fontz fontw700">{{ item.name }}</p>
                                        <div class=" my_grid">
                                            <div class="" v-for="(items, indexs) in item.setData" :key="indexs">
                                                <el-form-item v-if="items.type == 'text'" :label="items.label"
                                                    :prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
                                                    :rules="[{ required: items.rulesBool, message: '请输入' + items.label, trigger: 'blur' }]">
                                                    <el-input :disabled="indexValueBool" style="width: 350px;"
                                                        v-model="items.value"
                                                        :placeholder="`${'请输入' + items.label}`"></el-input>
                                                </el-form-item>
                                                <el-form-item v-if="items.type == 'textarea'" :label="items.label"
                                                    :prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
                                                    :rules="[{ required: items.rulesBool, message: '请输入' + items.label, trigger: 'blur' }]">
                                                    <el-input :disabled="indexValueBool" type="textarea"
                                                        style="width: 350px;" v-model="items.value"
                                                        :placeholder="`${'请输入' + items.label}`"></el-input>
                                                </el-form-item>
                                                <el-form-item v-if="items.type == 'select'" :label="items.label"
                                                    :prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
                                                    :rules="[{ required: items.rulesBool, message: '请选择' + items.label, trigger: 'blur' }]">
                                                    <el-select :disabled="indexValueBool" clearable v-model="items.value"
                                                        :placeholder="`${'请选择' + items.label}`" style="width:350px">
                                                        <el-option v-for="item in getDict(items.dictValue)"
                                                            :label="item.dictLabel" :value="item.dictValue">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item v-if="items.type == 'date-picker'" :label="items.label"
                                                    :prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
                                                    :rules="[{ required: items.rulesBool, message: '请选择' + items.label, trigger: 'blur' }]">
                                                    <el-date-picker :disabled="indexValueBool" type="date"
                                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"
                                                        :placeholder="`${'请选择' + items.label}`" v-model="items.value"
                                                        style="width: 350px;">
                                                    </el-date-picker>
                                                </el-form-item>

                                                <el-form-item v-if="items.type == 'uploadImage'" :label="items.label"
                                                    :prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
                                                    :rules="[{ required: `${items.rulesBool}`, message: '请上传图片', trigger: 'blur' }]">
                                                    <el-upload :disabled="indexValueBool" class="avatar-uploader"
                                                        :headers="headers" :action="action" :show-file-list="false"
                                                        :before-upload="beforeAvatarUpload"
                                                        :on-success="handleAvatarSuccess">
                                                        <img v-if="items.value" @click="beforeClick(index, indexs)"
                                                            :src="items.value" class="avatar">
                                                        <i v-else @click="beforeClick(index, indexs)"
                                                            class="el-icon-plus avatar-uploader-icon"></i>
                                                    </el-upload>
                                                </el-form-item>
                                                <el-form-item v-if="items.type == 'uploadImages'" :label="items.label"
                                                    :prop="'templateValue.' + index + '.setData.' + indexs + '.value'"
                                                    :rules="[{ required: items.rulesBool, message: '请上传图片', trigger: 'blur' }]">
                                                    <div @click="beforeClick(index, indexs)">
                                                        <el-upload :disabled="indexValueBool" class="avatar-uploader"
                                                            :headers="headers" :action="action"
                                                            :before-upload="beforeAvatarUpload" list-type="picture-card"
                                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                                                            :on-success="handleAvatarSuccess" :file-list="items.value">
                                                            <i style="width: 120px;height: 120px;"
                                                                class="el-icon-plus avatar-uploader-icon"></i>
                                                        </el-upload>
                                                    </div>
                                                    <el-dialog :visible.sync="dialogVisible">
                                                        <img width="100%" :src="dialogImageUrl" alt="">
                                                    </el-dialog>

                                                </el-form-item>
                                            </div>
                                        </div>
                                    </div>
                                </el-form>
                            </div>

                        </b-col>
                    </b-row>
                </b-container>
            </div>
        </div>

    </AllOut>
</template>

<script>
import { formTemplate, formAdd, formDetail, formTemplateput, formput, formTemplatepadd } from "@/api/my.js"
import { dictSect, dictFun, dictFuns } from "@/utils/dictUnit"

export default {
    data() {
        return {
            indexValue: 0,
            loading: false,
            loadings: false,
            nowData: [],
            id: "",
            ids: "",
            templateValue: [],
            ruleForm: {
                templateValue: []
            },
            rules: {},
            headers: {},
            action: process.env.BASE_URL + "application/oss/upload",
            dialogImageUrl: '',
            dialogVisible: false,
            indexV: "",
            indexS: "",
            id_b: "",
            bool: false,//post、put
            reportIds: "",
            reportIdEdit: "",
            datas_b: {},
            showBool: false,
            indexValueBool: false

        }
    },
    mounted() {
        // this.indexValue = this.getUrlParams().indexValue
        this.id = this.getUrlParams().id
        this.ids = this.getUrlParams().ids
        this.reportIds = this.getUrlParams().reportIds
        this.reportIdEdit = this.getUrlParams().reportIdEdit
        this.indexValueBool = this.getUrlParams().type  < 2 ? false : true
        console.log("报名表模板:", this.id, "原职位ids:", this.ids, "报名表id", this.reportIds,"indexValue：",this.getUrlParams().type);
        this.formTemplateApi(this.id)
        this.info()

    },
    methods: {
        back() {
            this.$router.push(`zhiwei_detail?id=${this.ids}`)
        },
        info() {
            var userInfoData_ = JSON.parse(sessionStorage.getItem('userInfoData_web'))
            this.headers = {
                "Authorization": `Bearer ${userInfoData_ ? userInfoData_.access_token : ""}`,
                "clientid": userInfoData_ ? userInfoData_.client_id : "eeb9377d4b6debbc0a6e8756bbbbb4c7"
            }
        },
        //----------------------------------------------------- 获取地址栏参数---------------------------------
        getUrlParams() {
            let url = window.location.search; //获取url中"?"符后的字串
            let paramsObj = new Object();
            if (url.indexOf("?") != -1) {
                let str = url.substr(1);
                str = str.split("&");
                for (let i = 0; i < str.length; i++) {

                    paramsObj[str[i].split("=")[0]] = decodeURI(str[i].split("=")[1]);

                }
            }
            return paramsObj;
        },
        async formTemplateApi(data) {
            this.loading = true
            await formTemplate(data).then(res => {
                this.templateValue = JSON.parse(res.data.templateValue)
                // console.log(this.templateValue);
                // this.ruleForm.templateValue = this.templateValue
                if (this.templateValue.length != 0) {
                    this.indexValue = this.templateValue[0].id
                }
                if (this.reportIds != "null") {
                    this.formDetailApi(this.reportIds)
                } else {
                    this.loading = false
                    this.bool = true
                    this.showBool = true
                }
            })
        },
        classClick(item) {
            this.indexValue = item.id
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm);
                    // alert('submit!');
                    if (this.bool) {//新增报名表信息
                        let data = {
                            formValue: JSON.stringify(this.ruleForm.templateValue)
                        }
                        this.formTemplateAddApi(data)
                    } else {//修改报名表信息
                        this.datas_b.formValue = JSON.stringify(this.ruleForm.templateValue)
                        this.formputApi(this.datas_b)
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        getDict(res) {
            return dictSect(res)
        },
        handleAvatarSuccess(res, file, fileList) {
            file.url = res.data.url
            file.ossId = res.data.ossId
            if (this.ruleForm.templateValue[this.indexV].setData[this.indexS].type == 'uploadImage') {
                this.ruleForm.templateValue[this.indexV].setData[this.indexS].value = res.data.url
            } else {
                this.ruleForm.templateValue[this.indexV].setData[this.indexS].value = fileList
                // this.ruleForm.templateValue[this.indexV].setData[this.indexS].value.push(res.data)
                console.log("多文件上传", fileList);
            }
            // this.imageUrl = URL.createObjectURL(file.raw);
            console.log("图片上传成功：", res);
        },
        beforeAvatarUpload(rawFile) {
            console.log("图片上传格式：", rawFile);
            if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/png') {
                this.$message({
                    message: '图片格式有误! 仅支持jpg、jpeg、png格式!',
                    type: 'error',
                });
                return false
            } else if (rawFile.size / 1024 / 1024 > 2) {
                this.$message({
                    message: '图片大小不超过2MB!',
                    type: 'error',
                });
                return false
            }
            // return isJPG && isLt2M;
        },
        handleRemove(file, fileList) {
            console.log("删除", file);
            this.deleteListFun(file)
            // console.log(this.ruleForm.templateValue[this.indexV].setData[this.indexS].value);
        },
        handlePictureCardPreview(file) {
            console.log(file);
            this.dialogVisible = true;
            this.dialogImageUrl = file.url;
        },
        beforeClick(index, indexs) {
            // console.log(index, indexs);
            this.indexV = index
            this.indexS = indexs
        },
        deleteListFun(file) {
            let indexV = "", indexS = "", index2 = ""
            this.ruleForm.templateValue.forEach((element, key) => {
                console.log(element, key);
                element.setData.forEach((el1, key1) => {
                    console.log(typeof el1.value);
                    if (typeof el1.value == "array") {
                        el1.value.forEach((el2, key2) => {
                            if (file.ossId == el2.ossId) {
                                indexV = key;
                                indexS = key1;
                                index2 = key2
                            }
                        })
                    }
                })
            });
            if (indexS != "" && indexV != "" && index2 != "") {
                this.ruleForm.templateValue[indexV].setData[indexS].value.splice(index2, 1)
                console.log(this.ruleForm.templateValue[indexV].setData[indexS].value);
            }
        },
        async formTemplateAddApi(data) {//新增报名表信息
            this.loading = true
            formAdd(data).then(res => {
                console.log("添加报名表信息：", res);
                let obj = {
                    positionId: this.ids,
                    registrationFromId: res.data
                }
                this.formTemplateputaddApi(obj)
            }).catch(res => {
                this.loading = false
            })
        },
        async formputApi(data) {//修改报名表信息
            this.loading = true
            formput(data).then(res => {
                console.log("修改报名表信息：", res);
                let obj = {
                    id: this.reportIdEdit,
                    registrationFromId: res.data
                }
                this.formTemplateputApi(obj)
            }).catch(res => {
                this.loading = false
            })
        },
        async formTemplateputApi(data) {//修改职位绑定
            formTemplateput(data).then(res => {
                this.loading = false
                console.log(res);
                this.$message({
                    message: res.msg,
                    type: 'success',
                });
            }).catch(res => {
                this.loading = false
                this.$message({
                    message: res.msg,
                    type: 'error',
                });
            })
        },
        async formTemplateputaddApi(data) {//新增职位绑定投递
            formTemplatepadd(data).then(res => {
                this.loading = false
                console.log(res);
                this.$message({
                    message: res.msg,
                    type: 'success',
                });
            }).catch(res => {
                this.loading = false
                this.$message({
                    message: res.msg,
                    type: 'error',
                });
            })
        },
        async formDetailApi(data) {//查询详细信息
            this.loading = true
            await formDetail(data).then(res => {
                this.loading = false
                console.log(res);
                if (res.data) {
                    this.datas_b = res.data
                    let array = JSON.parse(res.data.formValue)
                    this.ruleForm.templateValue = []
                    array.forEach(element => {
                        this.ruleForm.templateValue.push(element)
                    })
                    this.bool = false//存在报名表信息

                } else {
                    this.ruleForm.templateValue = this.templateValue
                    this.bool = true
                }
                console.log(this.ruleForm.templateValue);
                this.showBool = true
            })
        },

    }
}
</script>

<style lang="scss" scoped>
.asdise_content {
    width: 100%;
    min-height: 600px;
    max-height: 925px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #CACFD6;
    // padding: 0px 30px;

}

.my_main {
    padding: 26px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #CACFD6;
    min-height: 700px;

    .my_main_title {
        color: #3D3D3D;
        position: relative;
        margin-bottom: 23px;
        display: flex;
        align-items: flex-end;
        position: relative;

        &::after {
            top: 5px;
            left: -26px;
            position: absolute;
            content: "";
            width: 4px;
            height: 16px;
            background: #2F6CBC;
            border-radius: 0px 2px 2px 0px;
            opacity: 1;
        }

        span {
            margin-left: 20px;
            color: #898989;
        }

        .el-button {
            float: right;
            width: 88px;
            height: 30px;
            // background: #2F6CBC;
            border-radius: 8px 8px 8px 8px;
            opacity: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 16px;
        }
    }
}

.my_grid {
    display: grid;
    grid-template-columns: repeat(2, 45%);
    position: relative;

    .el-input {
        width: 348px;

        .el-input__inner {
            width: 100%;
        }
    }

    .my_grid_delete {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 88px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.asdise_content_ul {
    list-style: none;
    padding: 0;

    li {
        padding: 0px 21px;
        line-height: 48px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            width: 24px;
            height: 24px;
        }
    }

    .blue {
        color: #FFFFFF;
        background: #2F6CBC;
    }
}

.indexNav_content {
    height: 70px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #CACFD6;

    img {
        width: 24px;
        height: 24px;
        margin: 0px 23px;
    }

}</style>